<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .clock {
        width: 500px;
        height: 500px;
        margin: 100px auto;
        border-radius: 50%;
        position: relative;
        background-image: url("./img/bg.png");
        background-size: cover;
    }
    .clock > div{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .hour-wrapper{
        position: absolute;
        width: 65%;
        height: 65%;
        animation: run 2160000s linear infinite;
    }
    .hour{
        height: 50%;
        width: 6px;
        background-color: #777;
        margin: 0 auto;
    }

    .min-wrapper{
        height: 75%;
        width: 75%;
        animation: run 3600s steps(60) infinite;
    }
    .min{
        height: 50%;
        width: 4px;
        background-color: #aaa;
        margin: 0 auto;
    }
    .sec-wrapper{
        height: 85%;
        width: 85%;
        animation: run 60s steps(60) infinite;
    }
    .sec{
        height: 50%;
        width: 2px;
        background-color: red;
        margin: 0 auto;
    }

    @keyframes run {
        from {
            transform: rotateZ(0);
        }
        to {
            transform: rotateZ(360deg);
        }
    }
</style>
<body>
<div class="clock">
    <!--时针-->
    <div class="hour-wrapper">
        <div class="hour">

        </div>
    </div>
    <!--分针-->
    <div class="min-wrapper">
        <div class="min">

        </div>
    </div>
    <!--秒针-->
    <div class="sec-wrapper">
        <div class="sec">

        </div>
    </div>
</div>
</body>
</html>
